<template>
  <div id="container" :style="{width:width,height:height}"></div>
  <div class="icon">
    <div class="icon-item"><img src="../../../assets/images/icon53.png" alt=""> 收费站 <el-switch v-model="gateShow"
        @change="bindChangeSwitch('gateShow',$event)" /></div>
    <div class="icon-item"><img src="../../../assets/images/icon54.png" alt=""> 摄像头 <el-switch v-model="cameraShow"
        @change="bindChangeSwitch('cameraShow',$event)" /></div>
  </div>

  <div class="full-video" id="id_video" ref="myElement" :style="{height:carouselHeight}" v-if="isShowFullVideo">
    <div class="close" @click="bindCloseVideo">
      <Close style="color:#fff;font-size:26px" />
    </div>

  </div>

</template>

<script setup>
import '../../../utils/rem.js'
import { onMounted, onUnmounted, defineProps } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import hospitalJson from '../../../utils/xinzhou.json'
import { getVideoUrl, getVideoList, getVideoUrlByCameraId } from '@/api/charge/gate'
import Tollgate from './tollgate.js'//收费站
import Marker from './marker.js'//摄像头
import { Watch } from "@element-plus/icons-vue";
import { getIntro, } from "@/api/coordination/intro";
const VideoUrl = ref()
const props = defineProps({
  width: {
    type: String,
  },
  height: {
    type: String,
  },
  isFull: {
    type: Boolean,
  },
  carouselHeight: {
    type: String,
  },
});



const router = useRouter();
const gateShow = ref(true)
const cameraShow = ref(false)
const layerIconCamera = ref()
const layerIconGate = ref()
const myElement = ref(null);
const myElement1 = ref(null);
const isShowFullVideo = ref(false)


window._AMapSecurityConfig = {
  securityJsCode: "76d07dc7ab72cbe95ac658358acb6df5",
}
// import Maker from '../map/marker.js'
let map = null;
let AMap = null;
let loca = null;
onMounted(() => {
  initMap()
});
watch(() => props.isFull, newValue => {
  if (newValue) {
    initMap(9.5)
  } else {
    initMap(9)
  }
})
const bindChangeSwitch = (name, val) => {
  [name].value = val;
  if (gateShow.value) {
    layerIconGate.value.showIcon()
  }
  if (!gateShow.value) {
    layerIconGate.value.hideIcon()
  }
  if (cameraShow.value) {
    layerIconCamera.value.showIcon()
  }
  if (!cameraShow.value) {
    layerIconCamera.value.hideIcon()
  }
}
function geometryCollectionToFeatureCollection(geometryCollection) {
  var features = geometryCollection.geometries.map(function (geometry, index) {
    return {
      type: "Feature",
      geometry: geometry,
      properties: { type: 2 } // 可以添加更多属性
    };
  });

  return {
    type: "FeatureCollection",
    features: features
  };
}

const initMap = (zoom) => {
  AMapLoader.load({
    key: "94fce78e4ba059c39ab5757806ed2bae", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker', 'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow', 'AMap.DistrictSearch', 'AMap.Object3DLayer', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.OverView', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', , "AMap.HawkEye", "AMap.MouseTool"],
    'Loca': { // 是否加载 Loca， 缺省不加载
      'version': '2.0.0' // Loca 版本，缺省 1.3.2
    },
    'AMapUI': { // 是否加载 AMapUI
      'version': '1.1', // AMapUI 缺省 1.1
      'plugins': ['overlay/SimpleMarker', 'overlay/SvgMarker'] // 需要加载的 AMapUI ui插件
    },
    "minZoom": 8
    // mapStyle: "amap://styles/976c649a62250fc70a70c576a91694b9",
  })
    .then((AMap) => {

      map = new AMap.Map("container", {
        zoom: zoom ? zoom : 9,
        center: [112.453335, 38.891789],
        showLabel: false,
        viewMode: '2D',
        pitch: 0,
        mapStyle: "amap://styles/darkblue",
        // mapStyle: "amap://styles/976c649a62250fc70a70c576a91694b9",
      });

      areaCanvas(AMap, map, zoom)

    })
    .catch((e) => {
      console.log(e);
    });
}

const areaCanvas = (AMap, map, zoom) => {
  var opts = {
    subdistrict: 0,
    extensions: 'all',
    level: 'city'
  };
  var mask = []
  var bounds = []
  var district = new AMap.DistrictSearch(opts);

  district.search('山阴县', (status, result) => {
    bounds = result.districtList[0].boundaries;
    for (var i = 0; i < bounds.length; i += 1) {
      mask.push([bounds[i]])
    }


    district.search('阳曲县', (status, result2) => {
      var bounds2 = result2.districtList[0].boundaries;
      bounds = bounds.concat(bounds2)
      for (var i = 0; i < bounds2.length; i += 1) {
        mask.push([bounds2[i]])
      }

      district.search('忻州市', function (status, result3) {
        var bounds3 = result3.districtList[0].boundaries;
        bounds = bounds.concat(bounds3)
        for (var i = 0; i < bounds3.length; i += 1) {
          mask.push([bounds3[i]])
        }

        map = new AMap.Map('container', {
          zoom: zoom ? zoom : 8.8,
          mask: mask,
          center: zoom == 9 || !zoom ? [112.480769, 38.911735] : [112.4361, 38.734705],
          showLabel: false,
          viewMode: '2D',
          pitch: 0,
          zooms: [8, 20],
          // mapStyle: "amap://styles/darkblue",
          mapStyle: "amap://styles/976c649a62250fc70a70c576a91694b9",
        });

        //添加描边
        for (var i = 0; i < mask.length; i += 1) {
          new AMap.Polyline({
            path: mask[i],
            strokeColor: '#99ffff',
            strokeWeight: 0.8,
            map: map
          })
        }
        setColor(AMap, map, Loca)
        setMask(AMap, map, Loca)

      });

    });




  });
}


const setMask = (AMap, map, Loca) => {

  loca = new Loca.Container({
    map,
  });
  window._loca = loca;
  var featureCollection = geometryCollectionToFeatureCollection(hospitalJson);
  var geo = new Loca.GeoJSONSource({
    data: featureCollection
  })
  var layer = new Loca.PulseLineLayer({
    zIndex: 10,
    opacity: 1,
    visible: true,
    zooms: [2, 22],
  });
  var headColors = ['#EFBB51', '#7F3CFF', '#4CC19B', '#0B5D74', '#E06AC4', '#223F9B', '#F15C1A', '#7A0FA6'];
  layer.setSource(geo);
  layer.setStyle({
    altitude: 0,
    lineWidth: 4,
    headColor: (_, feature) => {
      return feature.properties.road_type == '高速路' ? 'rgba(0, 255, 220, .8)' : 'rgba(0, 255, 220, .8)';
    },
    // 脉冲尾颜色
    trailColor: 'rgba(0, 255, 220, .1)',
    // 脉冲长度，0.25 表示一段脉冲占整条路的 1/4
    interval: 0.85,
    // 脉冲线的速度，几秒钟跑完整段路
    duration: 1000,
  });
  loca.add(layer);
  loca.animate.start();




  layerIconGate.value = new Tollgate(map, Loca, loca, AMap, router, getIntro)


  // getVideoList().then(res => {
  //   if (res.code == 200) {

  //     layerIconCamera.value = new Marker(map, Loca, loca, AMap, router,res.data);
  //         layerIconCamera.value.hideIcon()
  //   }
  // })

  layerIconCamera.value = new Marker(map, Loca, loca, AMap, router);
  layerIconCamera.value.hideIcon()

  // new Marker(map, Loca, loca, AMap)

}


const setColor = (AMap, map, Loca) => {

  // 行政区颜色区分
  var disProvince = new AMap.DistrictLayer.Province({
    zIndex: 12,
    // adcode: ['140902','140926', '140921', '140981', '140922', '140923', '140924', '140925', '140928', '140927', '140929', '140930', '140931', '140932', '140621','140122'], 
    adcode: ['140900', '140600', '140100'],
    depth: 2,
    styles: {
      "fill": "rgba(10,44,95,.3)",
      'province-stroke': 'cornflowerblue',
      'city-stroke': 'white', // 中国地级市边界
      'county-stroke': 'rgba(109,227,255,0.5)' // 中国区县边界
    }
  })
  disProvince.setMap(map);



}

const getList = (code) => {
  getVideoUrlByCameraId({ code }).then(res => {
    if (res.code == 200 && res.data && res.data.VideoUrl) {
      VideoUrl.value = res.data.VideoUrl;
      resolve(VideoUrl.value)
    }
  })
}
const bindCloseVideo = () => {
  isShowFullVideo.value = false;

}

const bindShowVideo = () => {
  isShowFullVideo.value = true;
  // setTimeout(() => {
  //   var player = new TcPlayer('id_video', {
  //     "m3u8": VideoUrl.value,
  //     "autoplay": true,
  //     "width": myElement.value.getBoundingClientRect().width,
  //     "height": myElement.value.getBoundingClientRect().height,
  //   });
  // }, 1000);

}

window.getList = (data) => {
  getList(data);
};

window.bindShowVideo = (data) => {
  bindShowVideo(data);
};

onUnmounted(() => {
  map?.destroy();
});
</script>
 

 
<style lang="scss">
#container {
  width: 56.5625rem;
  height: 36.6875rem;
  background: #0a45a6;
}
#container .amap-layer {
  background: #0a45a6;
}
.textcusNew {
  width: 300px;
  text-align: center;
  color: #fff;
  padding: 3px 15px;
  background: #0a45a6;
  border: 1px solid #fff;
  border-radius: 10px;
}
.textcus {
  width: 300px;
  min-height: 166px;
  background: url(../../../assets/images/icon55.png) no-repeat 0 0;
  background-size: 100% 100%;
  text-align: center;
  color: #fff;
  padding: 3px 15px;
}
.textcus .namecus {
  text-align: left;
  margin: 15px 0;
  font-size: 14px;
  color: #6be4fd;
}
.textcus .gatecus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-right: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid #6ee5ff;
  font-size: 14px;
  line-height: 1.6;
}
.textcus .gatecus::after {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  background: url(../../../assets/images/icon56.png) no-repeat 0 0;
  background-size: 100% 100%;
  position: absolute;
  right: 0;
  top: 4px;
}
.demo-title {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

.amap-info-window {
  width: 150px;
  background: #fff;
  border-radius: 3px;
  padding: 3px 7px;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: relative;
  font-size: 12px;
}

.full-video {
  width: 100vw;
  height: 100%;
  overflow: hidden;
  position: fixed;
  left: 50%;
  top: 59%;
  transform: translate(-50%, -50%);
  z-index: 99;
  video {
    width: 100%;
    height: 100%;
  }
  .close {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 99;
  }
}

.narrow-videonew {
  position: relative;

  border-radius: 4px;
  border: 1px solid #98edff;
  overflow: hidden;
  background: #0a45a6;
  video {
    height: 100%;
  }
  .play-icon {
    width: 4rem;
    height: 4rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url(../../../assets/images/icon47.png) no-repeat 0 0;
    background-size: 100% 100%;
  }
  .full-icon {
    width: 2rem;
    height: 2rem;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: url(../../../assets/images/icon46.png) no-repeat 0 0;
    background-size: 100% 100%;
  }
}
</style>
<style scoped  >
.icon {
  position: fixed;
  right: 10px;
  bottom: 15%;
}
.icon .icon-item {
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  margin-bottom: 10px;
}
.full {
  font-size: 14px;
  position: fixed;
  top: 10%;
  right: 10px;
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;
}
.full img {
  margin-right: 10px;
}

#videoPlayerNew{
  width: 180px;
  height: 120px;
}
</style>